import 'package:aitao_flutter/common_ui/back_nav.dart';
import 'package:aitao_flutter/style/border_style.dart';
import 'package:aitao_flutter/style/box_style.dart';
import 'package:aitao_flutter/style/color_style.dart';
import 'package:aitao_flutter/style/edgeInsets_style.dart';
import 'package:aitao_flutter/style/radius_style.dart';
import 'package:aitao_flutter/style/text_style.dart';
import 'package:aitao_flutter/utils/alert_utils.dart';
import 'package:aitao_flutter/utils/sp_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../common_ui/circle_avatar.dart';
import '../../model/member_model.dart';
import '../controller/member_controller.dart';

class MemberPage extends StatelessWidget {
  MemberPage({super.key});
  final MemberController controller = Get.put(MemberController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorStyle.setColor(0xFF2F2F2D),
      appBar: BackNavigation(
        backArrowColor: ColorStyle.whiteColor,
        backGroundColor: ColorStyle.setColor(0xFF2F2F2D),
        title: '会员充值',
        titleColor: ColorStyle.whiteColor,
      ),
      body: GetBuilder<MemberController>(
        builder: (controller) {
          return controller.memberModel == null
              ? const Center(
                  child: Text('加载中...'),
                )
              : CustomScrollView(
                  slivers: [
                    _headerWidget(),
                    _memberTypeHeaderWidget(),
                    _memberOptionWidget()
                  ],
                );
        },
      ),
    );
  }

  Widget _memberTypeHeaderWidget() {
    return SliverToBoxAdapter(
      child: Container(
        height: 42.w,
        decoration: BoxDecoration(
          borderRadius: RadiusStyle.setPortionRadius(
              PortionRaduisType.radiusTopLeftAndTopRight, 16),
          color: ColorStyle.setColor(0xFF2F2F2D),
        ),
        margin: EdgeInsetsStyle.only(left: 15, right: 15, top: 15),
        child: Row(children: [
          Expanded(
              child: GestureDetector(
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: RadiusStyle.setPortionRadius(
                      PortionRaduisType.radiusTopLeftAndTopRight, 16),
                  color: controller.typeIndex == 0
                      ? ColorStyle.setColor(0xFF0D0D0D)
                      : ColorStyle.setColor(0xFF2F2F2D)),
              child: Text(
                '黄金会员',
                style: TextStyle(
                    fontSize: 18,
                    color: controller.typeIndex == 0
                        ? ColorStyle.setColor(0xFFE8CF9C)
                        : ColorStyle.setColor(0xFFE8CF9C)),
              ),
            ),
            onTap: () {
              controller.selectTypeIndex(0);
            },
          )),
          Expanded(
              child: GestureDetector(
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: RadiusStyle.setPortionRadius(
                      PortionRaduisType.radiusTopLeftAndTopRight, 16),
                  color: controller.typeIndex == 1
                      ? ColorStyle.setColor(0xFF0D0D0D)
                      : ColorStyle.setColor(0xFF2F2F2D)),
              child: Text(
                '钻石会员',
                style: TextStyle(
                    fontSize: 18,
                    color: controller.typeIndex == 1
                        ? ColorStyle.setColor(0xFFE8CF9C)
                        : ColorStyle.setColor(0xFFE8CF9C)),
              ),
            ),
            onTap: () {
              controller.selectTypeIndex(1);
            },
          ))
        ]),
      ),
    );
  }

  Widget _memberOptionWidget() {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsetsStyle.only(left: 15, right: 15, bottom: 38),
        padding: EdgeInsetsStyle.only(left: 13, right: 13, top: 18, bottom: 38),
        color: ColorStyle.setColor(0xFF0D0D0D),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: controller.typeIndex == 0
                  ? controller.goldList.asMap().entries.map((e) {
                      return _optionItemWidget(e.value, e.key);
                    }).toList()
                  : controller.diamondList.asMap().entries.map((e) {
                      return _optionItemWidget(e.value, e.key);
                    }).toList(),
            ),
            Box.vBox30,
            Text(
              controller.typeIndex == 0 ? '黄金会员特权' : '钻石会员特权',
              style: TextStyle(
                  fontSize: 16, color: ColorStyle.setColor(0xFFE8D29E)),
            ),
            Box.vBox30,
            GridView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                // maxCrossAxisExtent: 3,
                //设置横向间距
                crossAxisCount: 3,
                crossAxisSpacing: 10,
                //设置主轴间距
                mainAxisSpacing: 10,
              ),
              itemCount: controller.typeIndex == 0
                  ? controller.goldPrivilegeList.length
                  : controller.diamondPrivilegeList.length,
              itemBuilder: (context, index) {
                return _memberDesItemWidget(controller.typeIndex == 0
                    ? controller.goldPrivilegeList[index]
                    : controller.diamondPrivilegeList[index]);
              },
            )
          ],
        ),
      ),
    );
  }

  Widget _memberDesItemWidget(MemberPrivileges privileges) {
    return Column(children: [
      Image.network(
        SpUtil.getImageUrl(privileges.icon ?? 'images/member/vip-211.png'),
        width: 43.w,
        height: 43.w,
      ),
      Box.vBox10,
      Text(
        privileges.name ?? '',
        style: Styles.whiteText_13,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
      Text(
        privileges.desc ?? '',
        style: Styles.whiteText_11,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      )
    ]);
  }

  Widget _optionItemWidget(MemberList model, int index) {
    return GestureDetector(
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
              child: Container(
            width: 100.w,
            height: 140.w,
            decoration: BoxDecoration(
                borderRadius: RadiusStyle.radiusAll(14),
                border:
                    BoardStyle.borderAll(2, ColorStyle.setColor(0xFFfeb96d)),
                color: ColorStyle.setColor(0xFF0D0D0D)),
            child: Column(
              children: [
                Box.vBox(25),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(controller.setGoldVipIcon(index)),
                    Text(
                      '会员',
                      style: TextStyle(
                          fontSize: 14, color: ColorStyle.setColor(0xFFD29F6D)),
                    )
                  ],
                ),
                Box.vBox5,
                Text(
                  '${model.price}元',
                  style: Styles.whiteText_18,
                ),
                Box.vBox(9),
                Container(
                    decoration: BoxDecoration(
                        borderRadius: RadiusStyle.radiusAll(15),
                        color: ColorStyle.setColor(0xFFE2C59D)),
                    padding: EdgeInsetsStyle.edgeInsets(23, 3),
                    child: Text('购买',
                        style: TextStyle(
                            fontSize: 12,
                            color: ColorStyle.setColor(0xFF53370F))))
              ],
            ),
          )),
          Positioned(
            top: -5,
            child: Container(
              padding: EdgeInsetsStyle.edgeInsets(12, 2),
              decoration: BoxDecoration(
                  borderRadius: RadiusStyle.setPortionRadius(
                      PortionRaduisType.raduisTopAndBottomRight, 11.5),
                  gradient: ColorStyle.rechargeItemBgColor2),
              child: Text(
                model.name ?? '会员',
                style: TextStyle(
                    color: ColorStyle.setColor(0xFF53370F), fontSize: 12),
              ),
            ),
          ), //
        ],
      ),
      onTap: () {
        AlertUtils().showBottomListAlert(Get.context!, (e) {
          //TODO: 支付宝支付
          debugPrint(e);
        }, '支付方式', controller.paymentList);
      },
    );
  }

  Widget _headerWidget() {
    return SliverToBoxAdapter(
        child: Container(
      margin: EdgeInsetsStyle.only(top: 25),
      child: Column(
        children: [
          Container(
              padding: EdgeInsets.all(2.w),
              width: 64.w,
              height: 64.w,
              decoration: BoxDecoration(
                borderRadius: RadiusStyle.radiusAll(32.w),
                color: ColorStyle.setColor(0xFFF0C293),
              ),
              child: CircleAvatarWidget(
                imgWidth: 60.w,
                imgHeight: 60.w,
                url: controller.userData?.userinfo?.avatar ?? '',
                gender: controller.userData?.userinfo?.gender ?? 1,
              )),
          Box.vBox10,
          Text(
            controller.userData?.userinfo?.nickname ?? '昵称',
            style: TextStyle(
                color: ColorStyle.setColor(0xFFE8CF9C),
                fontSize: 18,
                fontWeight: FontWeight.bold),
          ),
          Box.vBox5,
          Text(
            controller.setMemberDate(),
            style:
                TextStyle(color: ColorStyle.setColor(0xFFC5B9A2), fontSize: 14),
          ),
          Box.vBox5,
          Text(
            '会员为本平台的虚拟服务一旦购买不予退款请谨慎操作',
            style:
                TextStyle(color: ColorStyle.setColor(0xFFDA2111), fontSize: 11),
          )
        ],
      ),
    ));
  }
}
